<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 20px;">
		<legend>上传个人档案图片</legend>
	</fieldset>

	<div class="site-demo-upload">
		<div class="site-demo-upbar">
			<input type="file" name="file" class="layui-upload-file" id="test">
		</div>
	</div>

	<blockquote class="layui-elem-quote" style="margin-top: 20px;">提交后以下会自动修改,请自行填写姓名</blockquote>
	<form action="sign" method="post">
		<div class="layui-form-item">
			<label class="layui-form-label">输入框</label>
			<div class="layui-input-block">
				<input type="text" name="name" required lay-verify="required"
					placeholder="请输入姓名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<table class="layui-table">
			<colgroup>
				<col width="300">
				<col width="300">
				<col width="300">
				<col width="300">
				<col >
			</colgroup>
			<thead>
				<tr>
					<th>height</th>
					<th>width</th>
					<th>left</th>
					<th>top</th>
					<th>words</th>
				</tr>
			</thead>
			<tbody id="table">
			</tbody>
		</table>
		<input type="submit" value="提交" class="layui-btn layui-btn-normal"/>
		<input type="reset" value="重置" class="layui-btn layui-btn-normal"/>
	</form>
	<script src="static/layui/layui.js" charset="utf-8"></script>
	<script src="static/jquery.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui
				.use(
						'upload',
						function() {
							layui.upload({
										url : '/upload/image' //上传接口
										,
										method : 'post' //上传接口的http类型
										,
										success : function(res) { //上传成功后的回调
											var s = $("#table").html();
											for (var i = 0; i < res.words_result.length; i++) {
												s += '<tr><td><input type="text" name="'
														+ ('height' + i)
														+ '" required  lay-verify="required" value="'
														+ res.words_result[i].location.height
														+ '" class="layui-input" disabled></td>'
														+ '<td><input type="text" name="'
														+ ('width' + i)
														+ '" required  lay-verify="required" value="'
														+ res.words_result[i].location.top
														+ '" class="layui-input" disabled></td>'
														+ '<td><input type="text" name="'
														+ ('left' + i)
														+ '" required  lay-verify="required" value="'
														+ res.words_result[i].location.left
														+ '" class="layui-input" disabled></td>'
														+ '<td><input type="text" name="'
														+ ('top' + i)
														+ '" required  lay-verify="required" value="'
														+ res.words_result[i].location.top
														+ '" class="layui-input" disabled></td>'
														+ '<td><input type="text" name="'
														+ ('a' + i)
														+ '" required  lay-verify="required" value="'
														+ res.words_result[i].words
														+ '" autocomplete="off" class="layui-input"></td></tr>';
											}
											$("#table").html(s);
										}
									});

							/*
							<td><input type="text" name="'+ ('top'+i) +'" required  lay-verify="required" value="'+ res.words_result[i].location.top +'" autocomplete="off" class="layui-input" disabled></td>'
							 <td><input type="text" name="'+ ('a'+i) +'" required  lay-verify="required" value="'+ res.words_result[i].location.height +'" autocomplete="off" class="layui-input"></td>
							 layui.upload({
							 url : '/test/upload.json',
							 elem : '#test' //指定原始元素，默认直接查找class="layui-upload-file"
							 ,
							 method : 'get' //上传接口的http类型
							 ,
							 success : function(res) {
							 LAY_demo_upload.src = res.url;
							 }
							 });
							 */
						});
	</script>
</body>
</html>